<template>
  <div>
    <div class="checkBox" v-if="isShowCheck">
      <el-checkbox-group v-model="checkedList" @change="handleCheckedChange">
        <el-checkbox v-for="(option, index) in options" :label="option" :key="index">
          {{option.name}}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="list" v-else>
      <div class="list-item" v-for="(option, index) in options" :key="index">
        {{option.name}}
        <template v-if="type=='wb'">
          <div
          v-if="!option.children || option.children.length==0"
          class="btn"
          @click="showDetail(option)"
          :style="{color: [0,1,2].includes(option.status)?'#000':'#0D48CE', cursor: [0,1,2].includes(option.status)?'unset':'pointer',marginRight:'10px'}"
        >{{['正常','已维护','忽略/无此项','需维修','需大修'][option.status]}}</div>
        <div class="detail wb" v-show="![0,1,2].includes(option.status)&&option.detailShow">
          <CImgUploadNew editMode="detail" class="imgListUpload" :initList="option.photo?option.photo.split(',').filter(i=>i).map(i=>({fileUrl:i})):[]"
            actionUrl="" :uploadParas="{ type: 'image', fileNum: 4 }"
          >
          </CImgUploadNew>
        </div>
        </template>
        <template v-else>
        <div
          v-if="option.children && option.children.length==0"
          class="btn"
          @click="showDetail(option)"
          :style="{color: option.dataStatus?'#000':'#0D48CE', cursor: option.dataStatus?'unset':'pointer',marginRight:'10px'}"
        >{{option.dataStatus?'合格':'不合格'}}</div>
        <div class="detail" v-show="!option.dataStatus&&option.detailShow">
          <div class="tip">不合格原因</div>
          <CImgUploadNew editMode="detail" class="imgListUpload" :initList="option.photo?option.photo.filter(i=>i).map(i=>({fileUrl:i})):[]"
            actionUrl="" :uploadParas="{ type: 'image', fileNum: 3 }"
          >
          </CImgUploadNew>
        </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import CImgUploadNew from "@/components/Upload/CImgUploadNew";
import {
  detailRecord,
} from '@/api/elevator-dailyCheck/checkRecord/index';
export default {
  name: "checkList",
  props: {
    /* 选项列表数据(树形结构的对象数组) */
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    checked: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isShowCheck: {
      type: Boolean,
      default: true
    },
    level: {
      type: Number,
      default: 1
    },
    type: {
      type: String,
      default: 'xj'
    },
  },
  data() {
    return {
      checkedList: this.checked
    };
  },
  components: {
    CImgUploadNew
  },
  watch: {
    checked(){
      this.checkedList = this.checked
    },
    options() {
      // this.$set( this.options, checked, false )
    }
  },
  mounted() {
  },
  methods: {
    handleCheckedChange(value) {
      this.checkedList=value
      this.$emit('changeChecked', value, this.level)
    },
    // 0正常，1已维护，2忽略/无此项，3需维修，4需大修
    showDetail(option) {
      if(this.type=='wb'){
        if([0,1,2].includes(option.status))return false
      }else{
        if(option.dataStatus) return false
      }
      this.$set(option,'detailShow',!option.detailShow)
      if(option.detailShow){
        if(this.type=='xj') {
          detailRecord(option.id).then((result) => {
            option.picUrl = result.picUrl
          }).catch((err) => {

          });
        }
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.btn{
  position: absolute;
  right: 0;
  top: 0;
  color: #000;
}
.list{
}
.list-title{
  height: 40px;
  line-height: 40px;
  background-color: #0D48CE;
  color: #fff;
  padding-left: 20px;
}
.list-item{
  line-height: 40px;
  padding-left: 20px;
  position: relative;
  background-color: #F6F6F6;
  margin-bottom: 10px;
  border-radius: 5px;
}
.detail{
   ::v-deep .upload-con{
    border: none;
    padding: 0 20px 10px 0;
    min-height:auto;
    gap: 16px;
   }
}
.tip {
  font-size: 12px;
  color: rgba(0,0,0,.5);
  line-height: 20px;
  padding-left: 5px;
}
.imgListUpload{
  gap: 0 10px;
  // min-height: unset;
}
</style>
<style lang="scss">
// .checkboxBg.el-checkbox{
//   color: #fff;
// }
// .checkboxBg .el-checkbox__input.is-checked + .el-checkbox__label{
//   color: #fff;
// }
// .checkboxBg .el-checkbox__label{
//   line-height: 40px;
//   background-color: #0D48CE;
//   margin-left: 8px;
//   padding-left: 2px;
//   flex: 1 1 auto;
// }
// .checkBox .el-checkbox-button{
//   width: 100%;
//   background-color: transparent;
// }
</style>
